<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>沧海云解析</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/willesPlay.css">
    <script src="/js/jquery.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/js/willesPlay.js" charset="utf-8"></script>
    <script src="//vjs.zencdn.net/5.11/video.min.js"></script>
</head>
<body style="background-color: #F1F1F1">

<!-- 导航栏 -->
<div th:insert="~{header :: nav}"></div>

<!-- 播放器 -->
<div class="container" style="margin-top: 50px;" id="content">
    <div class="row">
        <div class="col-md-8">
            <div id="willesPlay">
                <div class="playHeader">
                    <div class="videoName" th:text="${video.title}"></div>
                </div>
                <div class="playContent">
                    <video width="100%" height="100%" id="playVideo" autoplay>
                        <source th:src="${video.playUrl}" />
                        当前浏览器不支持 video直接播放，点击这里下载视频：
                        <a href="/">下载视频</a>
                    </video>
                    <div class="playTip glyphicon glyphicon-play" style="display: none"></div>
                </div>
                <div class="playControll">
                    <div class="playPause"></div>
                    <div class="timebar">
                        <span class="currentTime">0:00:00</span>
                        <div class="progress">
                            <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div>
                        </div>
                        <span class="duration">0:00:00</span>
                    </div>
                    <div class="otherControl">
                        <span class="volume glyphicon glyphicon-volume-down"></span>
                        <span class="fullScreen glyphicon glyphicon-fullscreen"></span>
                        <div class="volumeBar">
                            <div class="volumewrap">
                                <div class="progress">
                                    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 8px;height: 40%;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="panel panel-danger" style="margin-top: 20px">
                <div class="panel-heading">
                    <h3 class="panel-title">来源 / 解析</h3>
                </div>
                <div class="panel-body">
                    <a class="btn btn-danger" th:href="${video.resource}"><span class="glyphicon glyphicon-film"></span> [[${video.provider}]]</a>
                    <a class="btn btn-success" th:href="${video.parser}"><span class="glyphicon glyphicon-fire"></span> [[${video.parserName}]]</a>
                </div>
            </div>
            <div class="panel panel-danger videoList" style="margin-top: 20px">
                <div class="panel-heading">
                    <h3 class="panel-title">选集</h3>
                </div>
            </div>
        </div>
    </div>
</div><!-- End 播放器 -->

<script th:inline="javascript">
    var videoTitle = [[${video.title}]];
    $("title").text(videoTitle + "-沧海云解析");
</script>
<script style="text/javascript">
    $(document).ready(function (){
        var regx = /v=(.*)/;
        var src = regx.exec(window.location.href)[1];
        var api = "/api/juji";
        console.log("请求获取集数");
        $.post(api, {"v":src}, function (data) {
            if (data.length>0){
                var jumb = $("<div class='panel-body listItem'>");
                $(".videoList").append(jumb);
                for (var i=0;i<data.length;i++){
                    var juji = $("<button class='btn btn-danger jujiSelect' style='margin: 5px;'></button>")
                    juji.text(data[i].index);
                    juji.attr("value",data[i].value);
                    $(".listItem").append(juji);
                }
                $(".jujiSelect").click(function (){
                    var playUrl = $(this).val();
                    playUrl = "/api/video?v=" + playUrl;
                    $.get(playUrl,function (data)
                    {
                        $(".videoName").text(data.title);
                        $("#playVideo").attr("src", data.playUrl);
                        $("title").text(data.title + "-沧海云解析");
                    })
                });
            }
        });
    });
</script>
</body>
</html>
